<template>
  <div id="listSettings">
    <el-dialog
      width="42%"
      :title="dialogTitle"
      :visible.sync="showDialogVisible"
      custom-class="revenue-code-number"
    >
      <div class="el-dialog__body-bodys">
        <el-form
          :model="form"
          ref="form"
          label-width="144px"
          class="ccui-form"
          :rules="rules"
        >
          <el-form-item label="交货地点：" required>
            <el-select
              class="area-select"
              v-model="form.deliveryAreaName"
              placeholder="请选择地区"
              @change="handleChange('deliveryArea')"
            >
              <el-option
                v-for="item in deliveryAreaOptions"
                :key="item.addressCode"
                :label="item.addressAbbr"
                :value="item.addressAbbr"
              >
              </el-option>
            </el-select>
            <el-select
              class="area-select"
              v-model="form.provinceName"
              placeholder="请选择省份"
              @change="handleChange('province')"
            >
              <el-option
                v-for="item in provinceOptions"
                :key="item.addressCode"
                :label="item.addressAbbr"
                :value="item.addressAbbr"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="">
            <el-select
              class="area-select"
              v-model="form.cityName"
              placeholder="请选择市"
              @change="handleChange('city')"
            >
              <el-option
                v-for="item in cityOptions"
                :key="item.addressCode"
                :label="item.addressAbbr"
                :value="item.addressAbbr"
              >
              </el-option>
            </el-select>
            <el-select
              class="area-select"
              v-model="form.countyName"
              placeholder="请选择县"
              @change="handleChange('county')"
            >
              <el-option
                v-for="item in countyOptions"
                :key="item.addressCode"
                :label="item.addressAbbr"
                :value="item.addressAbbr"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="">
            <el-input
              v-model.trim="form.deliveryPoints"
              placeholder="请输入详细地址"
            />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button
          size="mini"
          type="default-mini"
          @click="showDialogVisible = false"
          >取 消</el-button
        >
        <el-button size="mini" type="primary-font-mini" @click="handleTrue"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getQryAreaAddress, postGetEnum } from "@/basa/api";
export default {
  name: "addressSettings",
  components: {},
  props: {
    isSelect: {
      type: Boolean,
      default: false
    },
    dialogTitle: {
      type: String,
      default: ""
    },
    selectTableList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      showDialogVisible: false,
      form: {},
      rules: {
        deliveryAreaName: [
          { required: true, message: "请选择交货地点", trigger: "change" }
        ]
      },
      Enum: {
        taxRateList: []
      },
      deliveryAreaOptions: [],
      provinceOptions: [],
      cityOptions: [],
      countyOptions: [],
      areaArr: ["deliveryArea", "province", "city", "county"],
      changeOnly: ""
    };
  },
  created() {
    this.postGetEnum();
  },
  methods: {
    // 获取枚举
    postGetEnum() {
      const arr = [
        "getTaxRateDict" // 查询税率字典数据
      ];
      for (let i = 0; i < arr.length; i++) {
        const element = arr[i];
        postGetEnum(element).then(res => {
          this.Enum[Object.keys(this.Enum)[i]] = res.data.data;
        });
      }
    },
    // 点击事件
    handleClick(row) {
      console.log("选中的行", row, "当前状态", this.form);
      this.changeOnly = row.only;
      this.form.deliveryAreaName = row.deliveryAreaName;
      this.form.provinceName = row.provinceName;
      this.form.cityName = row.cityName;
      this.form.countyName = row.countyName;
      // this.$set(this.form , "countyName" , row.countyName)
      // this.form.deliveryPoints = row.deliveryPoints;
      this.$set(this.form, "deliveryPoints", row.deliveryPoints);
      this.showDialogVisible = true;
      if (row.deliveryAreaName !== "") {
        console.log("选择大区不是空的");
        this.getQryAreaAddress();
        this.getQryAreaAddress(row.deliveryAreaCode, "deliveryArea");
        this.getQryAreaAddress(row.province, "province");
        this.getQryAreaAddress(row.city, "city");
        // this.getQryAreaAddress(row.county, "county");
      } else {
        this.getQryAreaAddress();
      }
    },

    taxRateChange(val) {
      this.form.taxRateCode = this.Enum.taxRateList.find(
        _ => _.dicValue === val
      ).dicKey;
    },

    handleChange(type) {
      const tempCode = this[`${type}Options`].find(
        _ => _.addressAbbr === this.form[`${type}Name`]
      ).addressCode;

      // if (type === this.areaArr[0]) {
      //   this.form[`${type}Code`] = tempCode;
      // } else {
      //   this.form[`${type}`] = tempCode;
      // }
      if (type === "deliveryArea") {
        this.form[`${type}Code`] = tempCode;
        this.form.provinceName = "";
        this.form.cityName = "";
        this.form.countyName = "";
        this.cityOptions = [];
        this.countyOptions = [];
      } else {
        this.form[`${type}`] = tempCode;
      }

      if (type === "province") {
        this.form.cityName = "";
        this.form.countyName = "";
        this.countyOptions = [];
      }
      if (type === "city") {
        this.form.countyName = "";
      }
      this.$forceUpdate();
      this.getQryAreaAddress(tempCode, type);
    },

    getQryAreaAddress(parentCode = null, branch = "deliveryArea") {
      const data = { parentCode, overseasFlag: 0 };
      getQryAreaAddress(data).then(res => {
        if (res.data.code === "0") {
          if (parentCode == null) {
            this.deliveryAreaOptions = res.data.data;
          } else {
            this[
              `${
                this.areaArr[this.areaArr.findIndex(_ => _ === branch) + 1]
              }Options`
            ] = res.data.data;
          }
        }
      });
    },

    // 确定
    handleTrue() {
      if (
        this.form.deliveryAreaName &&
        this.form.provinceName &&
        this.form.cityName &&
        this.form.deliveryPoints
      ) {
        // 把需要更改的行id加进去
        this.form.changeOnly = this.changeOnly;
        console.log("传回去的", this.form);
        this.$emit("ok", this.form);
        this.showDialogVisible = false;
        this.$nextTick(() => {
          this.form = {};
          // 清空地址选择项
          this.deliveryAreaOptions = [];
          this.provinceOptions = [];
          this.cityOptions = [];
          this.countyOptions = [];
        });
      } else {
        this.$message({
          message: "请选择完整的交货地点",
          type: "error",
          duration: 2000,
          ccuiCustom: true
        });
      }
    }
  }
  // computed: {
  //   ...mapGetters(["getMultiRateCode"])
  // }
};
</script>

<style lang="scss" scoped>
#listSettings {
  display: inline-block;
  margin-left: 10px;
  /deep/ .el-dialog__header {
    display: flex;
    align-items: center;
  }
  /deep/ .revenue-code-number .el-dialog__body {
    width: auto;
    height: auto;
  }
  .el-input,
  .el-textarea {
    width: 340px;
  }
  .area-select {
    & + .area-select {
      margin-left: 10px;
    }
    /deep/ .el-input {
      width: 165px;
    }
  }
}
</style>
